<template>
    <el-container style="border: 0px solid #000">
        <el-main style="padding:0px">
            <el-row>
                <el-col :span="8" :offset="8" style="max-width: 350px;">
                    <el-input placeholder="请输入内容" v-model="serach">
                        <el-button slot="append" type="primary" @click="requestGridData">搜索</el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-radio-group v-model="radio" @change="radioChange">
                        <el-radio  :label=0>全部</el-radio>
                        <el-radio v-for="item in dataSourcesSplit"  :label=item.id>{{item.name}}</el-radio>
                    </el-radio-group>
                    <el-dropdown @command="handleCommand" v-if="moreShow"  style="margin-left: 30px;">
                       <span class="el-dropdown-link">
                       更多
                        <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item v-for="item in dataSources" :command=item.id>{{item.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    :height="tableHeight"
                    style="width: 100%;"
                    v-loading="loading"
                    :show-header="showHeader"
                    @row-dblclick="handdleRowClick"
                    element-loading-text="数据加载中。。。"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.8)"
            >
                <el-table-column type="selection" v-if="false" width="55"></el-table-column>
                <el-table-column prop="id" v-if="false" label="主键"></el-table-column>
                <el-table-column prop="avater" width="60">
                    <template >
                     <i  style="color: #67C23A;display: initial;font-size:-webkit-xxx-large;" class="el-icon-date"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="name">
                    <template slot-scope="scope">
                        <div v-html="scope.row.aliasName"></div>
                        <div v-html="scope.row.tableName"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="type">
                    <template slot-scope="scope">
                        <div>数据库</div>
                        <div v-html="scope.row.dataScorceType"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="field">
                    <template slot-scope="scope">
                        <div>数据层</div>
                        <div v-html="scope.row.layerName"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="field">
                    <template slot-scope="scope">
                        <div>数据域</div>
                        <div v-html="scope.row.domainName"></div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('base.action')" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="multiQualityBtnClick( scope.row)">添加质量</el-button>
                        <el-button size="mini" type="text" @click="multiMaskBtnClick(scope.row)">添加脱敏</el-button>
                        <el-dropdown trigger="click">
              <span class="el-dropdown-link" style="font-size:12px;color: #409EFF;margin-left:10px">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item >移动</el-dropdown-item>
                                <el-dropdown-item>域中删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
            ></el-pagination>
        </el-main>
        <v-multiMaskRuleDialog
                :dialogVisible="multiMaskDialogVisiable"
                :tableId="tableId"
                :columnInfoData="columnInfoData"
                @maskDialogClose="multimaskDialogClose"
                @maskDialogSave="multimaskDialogSave"
        ></v-multiMaskRuleDialog>
        <v-multiQualityRuleDialog
                :dialogVisible="multiQualityDialogVisiable"
                :tableId="tableId"
                :columnInfoData="columnInfoData"
                @qualityDialogClose="multiqualityDialogClose"
                @qualityDialogSave="multiqualityDialogSave"
        ></v-multiQualityRuleDialog>
    </el-container>
</template>
<script>
    import multiQualityRuleDialog from "./MultiQualityRuleDialog";
    import multiMaskRuleDialog from "./MultiMaskRuleDialog";
    export default {
        //初始化数据
        data() {
            return {
                tableHeight: window.innerHeight - 260,
                serach: "",
                tableData: [],
                defaultImg: "",
                currentPage: 1,
                pagesize: 10,
                total: 1,
                loading: false,
                title: "",
                showHeader: false,
                dialogVisible: false,
                treeNode: {},
                radio: 0,
                dataSourcesSplit:[],
                dataSources:[],
                moreShow:false,
                multiMaskDialogVisiable: false, //添加脱敏接口
                multiQualityDialogVisiable:false,//添加质量窗口
                columnInfoData:[],
                tableId:0,//表Id
            };
        },
        components: {
            "v-multiMaskRuleDialog": multiMaskRuleDialog,
            "v-multiQualityRuleDialog": multiQualityRuleDialog
        },
        //方法
        methods: {
            //每页显示数据个数变化时调用
            handleSizeChange(val) {
                this.pagesize = val;
                this.requestGridData();
            },
            //数据源选择变化
            radioChange(){
                this.requestGridData();
            },
            //页码变化时调用
            handleCurrentChange(val) {
                this.currentPage = val;
                this.requestGridData();
            },
            //添加质量
            multiQualityBtnClick(row) {
                this.tableId=row.id;
                this.multiQualityDialogVisiable = true;
            },
            multiqualityDialogClose(data) {
                this.multiQualityDialogVisiable = false;
            },
            multiqualityDialogSave(data) {
                //this.EventBus.$emit("getColumnInfoData");
                this.multiQualityDialogVisiable = false;
            },
            //添加脱敏
            multiMaskBtnClick(row) {
                this.tableId=row.id;
                this.multiMaskDialogVisiable = true;
            },
            multimaskDialogClose() {
                this.multiMaskDialogVisiable = false;
            },
            multimaskDialogSave() {
               // this.EventBus.$emit("getColumnInfoData");
                this.multiMaskDialogVisiable = false;
            },

            //请求数据
            requestGridData() {
                let  _this = this;
                let id=_this.treeNode.id;
                this.axios
                    .post(this.HOST + "model/findByPage", {
                        pageNum: _this.currentPage,
                        pageSize: _this.pagesize,
                        domainId:id,
                        name: _this.serach,
                        dataSourceId:_this.radio,
                    }).then(function (res) {

                        if(res.data.status=="1"){
                            _this.tableData=res.data.data['data'];
                            _this.total=res.data.data['total']
                        }else{
                            console.log(res.stackmessage);
                        }
                    }
                ).catch(function (err) {
                        console.log(err);
                    });
            },
            //表格行点击事件
            handdleRowClick(row, event, column){
                console.log(row,event,column);
                this.$router.push({
                    path: "/modelcolumn",
                    query: { id: row.id }
                });

            },
            handleCommand(command) {
               this.radio=command;
               this.requestGridData();
            },
            //子组件数据清空
            retLookup() {
            },
            //获取数据源信息
            getDataSource(){
                let _this=this;
                this.axios
                    .post(this.DATASOURCE_HOST + "list", ).then(function (res) {
                        if(res.data.status=="1"){
                            let data=res.data.data;
                            if(data.length<=4){
                                _this.moreShow=false;
                                _this.dataSourcesSplit=data;
                            }else{
                                _this.dataSourcesSplit= data.slice(0,4);
                                _this.dataSources=data;
                                _this.moreShow=true;
                            }
                        }else{
                            _this.moreShow=false;

                            console.log(res.stackmessage);
                        }
                    }
                ).catch(function (err) {
                    console.log(err);
                });
            }
        },
        //加载时调用方法 函数
        mounted() {
            let _this = this;
            _this.getDataSource();
            _this.EventBus.$on("refreshGrid", treeNode => {
                _this.treeNode = treeNode;
                _this.requestGridData();
            });
        }
    };
</script>
<style scoped>
    .el-col {
        margin-bottom: 10px;
    }

    .el-pagination {
        position: absolute;
        right: 20px;
        margin-top: 25px;
    }

    .el-popover__reference {
        margin-left: 10px;
    }

    .el-radio__input {
        display: none;
    }
</style>

